'use strict';
var React = require('react');
var Router = require('react-router'); 
var Link = Router.Link;
var Route = Router.Route;

var TabComponent = React.createClass({
      mixins: [ Router.State ],
      propTypes :{
            optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.object)
      },
      render: function() {
            var path = this.getPath();
            var pathName = path.substr(4,path.length);

            var list = this.props.data.map(function (list) {
                  return (
                    <li key={ list.name }>
                              <Link to={list.to} className={ pathName == list.to || pathName == list.parent ? 'active' : '' }>
                                    {list.name}
                                    <span className="arrow"> <i className="fa fa-caret-up"></i>
                                    </span>
                              </Link>
                        </li>
                  );
            });
            return (
                        <ul className="do-nav-tab">
                              {list}
                        </ul>
            );
   }
});

module.exports =TabComponent;